<template>
  <uni-nav-bar title="代理加注订单" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view class="space-between">
      <view>单号</view>
      <view>{{orderAll.order_sn}}</view>
    </view>
    <view class="space-between top">
      <view>下单时间</view>
      <view>{{orderAll.createtime}}</view>
    </view>
    <view class="space-between top">
      <view>预约时间</view>
      <view>{{orderAll.time}}</view>
    </view>
    <view class="space-between top" style="align-items: flex-start;">
      <view>位置</view>
      <view style="width: 70%;text-align: right;">{{orderAll.address}}</view>
    </view>
    <view class="space-between top">
      <view>车牌号</view>
      <view>{{orderAll.cart_code}}</view>
    </view>
    <view class="space-between top">
      <view>加注量</view>
      <view>
        <text>{{orderAll.amount}}</text>
        <text>公斤</text>
      </view>
    </view>
    <view class="space-between top">
      <view>消费者</view>
      <view>
        <text>{{orderAll.driver_name}}</text>
        <text style="color: #1B91FF;margin-left: 5rpx;" @click="telCall(orderAll.driver_mobile)">{{orderAll.driver_mobile}}</text>
      </view>
    </view>
    <view class="space-between top" v-if="orderAll.plug_name">
      <view>加注员</view>
      <view>
        <text>{{orderAll.plug_name}}</text>
        <text style="color: #1B91FF;margin-left: 5rpx;" @click="telCall(orderAll.plug_mobile)">{{orderAll.plug_mobile}}</text>
      </view>
    </view>
  </view>
  <view class="package" style="color: #1B91FF;">{{orderAll.fill_status_text}}</view>
  <view class="package">
    <view class="space-between">
      <view>实际加注量</view>
      <view>
        <text>{{orderAll.fill_amount}}</text>
        <text style="font-size: 26rpx;">公斤</text>
      </view>
    </view>
    <view class="space-between top">
      <view>实付</view>
      <view>
        <text>{{orderAll.money}}</text>
        <text style="font-size: 26rpx;">元</text>
      </view>
    </view>
    <view class="space-between top">
      <view>消费金额</view>
      <view>
        <text>{{orderAll.fill_fee}}</text>
        <text style="font-size: 26rpx;">元</text>
      </view>
    </view>
    <view class="space-between top">
      <view>退款</view>
      <view>
        <text>{{orderAll.tui_money}}</text>
        <text style="font-size: 26rpx;">元</text>
      </view>
    </view>
  </view>
  <view class="package">
    <view class="space-between">
      <view>积分</view>
      <view>{{orderAll.score}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navBack } from '@/utils/navigator';
import { ref } from 'vue';
import { onLoad} from '@dcloudio/uni-app';
import { getOrderInfo } from '@/gql/filling';
import { telCall } from '@/utils/copyText';
import { toPublish } from '@mqtt';
const orderID=ref('')
const orderAll=ref({})
onLoad((pearm)=>{
  orderID.value=pearm.id
  init()
})
function init(){
  const payload = {
    query: getOrderInfo,
    variables: {
      order_id:Number(orderID.value)
    },
  };
  toPublish(
    'ql/take/getOrderInfo',
    payload,
    (obj: any) => {
      const { getOrderInfo } = obj.data;
      orderAll.value=getOrderInfo
    }
  );
}
</script>

<style scoped lang="less">
  .top{
    margin-top: 20rpx;
  }
</style>